<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="商品分类" prop="defaultPaymentMethod">
        <el-select v-model="gtId" placeholder="请选择" @change="selectGoodsType">
          <el-option
            v-for="(item, key) in goodsTypeList"
            :key="key"
            :label="item.gtName"
            :value="item.gtId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称" prop="newFrom">
        <el-select v-model="goodsId" placeholder="请选择">
          <el-option
            v-for="(l, key) in goodsList"
            :key="key"
            :label="l.goodsName"
            :value="l.goodsId"
          />
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getData">查询</el-button>
    </el-form>
    <lb-table
      ref="lbTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      @fetch="getData"
    />
  </div>
</template>

<script>
  // import moment from 'dayjs'
  import { parseTime } from '@/utils'
  // import { csmTypeMap, csmLevelMap, newTypeMap, defaultPaymentMethodMap, csmFromPlatMap, isPickUpMap, settlementTypeMap, gasNatureMap } from '@/utils/map'
  import { customerSpecialPrice, goodsTypeQueryList, goodsTypeDetail } from '@/api'

  export default {
    name: 'tab-special',
    props: ['csmId'],
    data() {
      return {
        goodsTypeList: [],
        goodsList: [],
        goodsId: null,
        gtId: null,
        tableData: {
          column: [
            {
              prop: 'createTime',
              label: '发生时间',
              width: 180,
              render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            },
            {
              prop: 'priceDesc',
              label: '价格变更',
              showOverflowTooltip: true
            }
          ],
          data: []

        }
      }
    },
    mounted() {
      this.getGoodsType()
    },
    methods: {
      async getData({ currentPage = 1, pageSize = 10 }) {
        const params = {
          currentPage,
          pageSize,
          csmId: String(this.csmId),
          'goodsId': this.goodsId,
          'gtId': this.gtId
        }
        const res = await customerSpecialPrice(params)
        if (!res.data) {
          this.tableData.data = []
          return
        }

        for (var i in res.data) {
          var priceDesc = ''
          var item = res.data[i]
          priceDesc += ' 操作员【' + item.operator + '】'
          priceDesc += item.remark + '商品【' + item.goodsName + '】的报价【波动方式：'
          if (item.priceType === 1) {
            priceDesc += '下浮;'
          } else {
            priceDesc += '固定;'
          }
          var price
          if (item.price === undefined) {
            price = 0.0
          } else {
            price = item.price
          }
          priceDesc += '波动价格：' + price + '元；时效范围：' + parseTime(item.startDt, '{y}-{m}-{d} {h}:{i}:{s}') + '~' + parseTime(item.endDt, '{y}-{m}-{d} {h}:{i}:{s}') + ';生效机构：' + item.scopeOrgName + '】'
          item.priceDesc = priceDesc
        }
        this.tableData.data = res.data
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      async getGoodsType() {
        const res = await goodsTypeQueryList({ currentPage: 1, pageSize: 999 })
        this.goodsTypeList = res.data
      },
      async selectGoodsType(value) {
        console.log(value)
        this.gtId = value
        this.goodsId = null
        const res = await goodsTypeDetail({ gtId: value })
        this.goodsList = res.data.rows
      }
    }

  }
</script>

<style scoped>

</style>
